/** @jsxImportSource @emotion/react */
import * as React from "react";
import { Text, useTheme, Button,} from "customize-easy-ui-component";
import {DirectLink, Link as RouterLink,} from "../../../routing/Link";
import {ReportViewProps,} from "../../common/base";
import {末尾链接, 落款单位地址,} from "../../common/rarelyVary";
import {config报告设备, 报告设备详情,} from "./repView";
import {useRepMenuDirItems, } from "../../hook/useMainRepUrlOr";
import queryString from "query-string";
import {FormatOriginal, } from "./FormatOriginal";
import RoutingContext from "../../../routing/RoutingContext";
import {useContext} from "react";
import {CatalogVw} from "./Catalog";
import {DesignParameterVw} from "./DesignParameter";
import {DocumentationVw} from "./Documentation";
import {StructuralTypeVw} from "./StructuralType";
import {PrototypeInspVw} from "./PrototypeInsp";
import {TestingsVw} from "./Testings";
import {UnitnameModifyVw} from "./UnitnameModify";
import {PrototypeImgVw} from "./PrototypeImg";
import {ReportFirstPageHeadCnasTypFo, 型试编制核准, 注意事项Balan, 首页概况Balan} from "./rarelyVary";

//证书2页的：且是 自带页码号；
export const ReportView: React.FunctionComponent<ReportViewProps> = ({
repId,  source: orc,  verId,rep,
}) => {
    const qs= queryString.parse(window.location.search);
    const formatOriginal =qs && !!qs.original;      //改成  格式化版原始记录
    const { history } = useContext(RoutingContext);
    const Component=formatOriginal? FormatOriginal : OfficialReport;
    return (<>
        <Component  source={orc} verId={verId} repId={repId} rep={rep}/>
        <div css={{margin: '0.5rem', "@media print": {display: 'none'} }}>
            <Button intent="danger" variant="outline"
                  onPress={async () => {
                      qs.original =formatOriginal? '' : '1';
                      history.location.search = queryString.stringify(qs);
                      const toUrl= history.createHref(history.location);
                      history.push(toUrl);
                  }}>{formatOriginal? '正式报告':'格式化版原始记录'}
            </Button>
        </div>
    </>);
}

const JumpTags=[{name:'设备概况',ha:'Survey'},{name:'一、样机主要参数',ha:'DesignParameter'},{name:'样机主要结构型式照片',ha:'PrototypeImg'},
         {name:'四、样机检查',ha:'StructuralType'},{name:'2.9传动系统检查',ha:'PrototypeInsp_16'},{name:'五、样机试验',ha:'Testings'},{name:'3.10强化试验',ha:'Testings_34'}];
/**特别的： 没有机电都有的 renderIspContent  impressionismAs；
* */
const OfficialReport: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const qs= queryString.parse(window.location.search);
    const printing =qs && !!qs.print;
    const theme= useTheme();
    const [rootMenu]=useRepMenuDirItems(JumpTags, [],`/reportView/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}`);
  return (
    <React.Fragment>
      {rootMenu}
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
            <div css={{"@media print": {height: '100vh'}}}>
                {ReportFirstPageHeadCnasTypFo({theme,rep,mbbm: 'FJB/NG-1018-1-2022'})}
                <div css={{
                    "@media print": {
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        height: 'calc(100vh - 11rem)',
                    }
                }}>
                    <Text variant="h3" css={{
                        textAlign: 'center',
                        "@media print": {fontSize: theme.fontSizes[5], marginTop: '1.5rem',},
                    }}>
                      特种设备型式试验报告
                    </Text>
                    {首页概况Balan({theme, orc, dtyp:'5'})}
                    <div css={{
                        textAlign: 'center',
                        "@media print": {pageBreakAfter: 'always', pageBreakInside: 'avoid'}
                    }}>
                        {落款单位地址}
                    </div>
                </div>
            </div>
            {注意事项Balan({
                rep,
                comply: '是依据《场(厂)内专用机动车辆安全技术规程》(TSG 81—2022)进行型式试验的结论报告'
            })}

            <CatalogVw orc={orc} rep={rep}/>
            <div css={{display: 'flex', flexDirection: 'column', justifyContent: 'center',
                            "@media print": {pageBreakBefore: 'always',minHeight: '100vh'}}}>
                <DirectLink href={`/report/${rep?.modeltype}/ver/${verId}/${repId}/Instrument`}>
                    <div css={{display: 'flex', flexDirection: 'column', justifyContent: 'center', }}>
                        <Text variant="h4" css={{margin: 'auto'}}>场（厂）内专用机动车辆型式试验结论报告</Text>
                    </div>
                    <div css={{display: 'flex', justifyContent: 'space-between'}}>
                        <Text></Text>
                        <Text>报告编号：{rep.isp.no}</Text>
                    </div>
                </DirectLink>
                {报告设备详情({orc, rep, config: config报告设备})}
                {型试编制核准({orc,rep})}
            </div>

            <div css={{"@media print": {pageBreakBefore: 'always'}}}/>
            <DesignParameterVw orc={orc} rep={rep} title={'一、样机主要参数'}/>
            <PrototypeImgVw orc={orc} rep={rep} label={'二、样机主要结构型式及整机照片'}/>
            <DocumentationVw orc={orc} rep={rep} title={'三、样机技术资料审查'}/>
            <StructuralTypeVw orc={orc} rep={rep} title={'四、样机检查'}/>
            <PrototypeInspVw orc={orc} rep={rep}/>
            <TestingsVw orc={orc} rep={rep} title={'五、样机试验'}/>
            <UnitnameModifyVw orc={orc} rep={rep} title={'六、型式试验报告变更情况'}/>
        </div>
        <div>
            <RouterLink href={`/report/${rep?.modeltype}/ver/${verId}/${repId}/Instrument#Instrument`}>
                <Text variant="h4" css={{"@media print": {display: 'none'}}}>主要测量设备性能检查</Text>
            </RouterLink>
            <RouterLink href={`/report/${rep?.modeltype}/ver/${verId}/${repId}/Measure2?original=1#Measure`}>
                <Text variant="h4" css={{"@media print": {display: 'none'}}}>附表1 测量结果记录</Text>
            </RouterLink>
        </div>
      {末尾链接({template:rep?.modeltype,verId, repId: repId||''})}
    </React.Fragment>
  );
}
